/**
    产品详情页
 */
<template>
    <div style="max-width:1200px;margin:auto;">
        <el-row>
            <el-col :span="12">
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                    class="image">
            </el-col>
            <el-col :span="12" style="text-align:left;">
                <div>EASEHOLD化妆镜带灯led美妆梳妆贝壳镜子情人节礼物生日礼物送女生女友 两侧带灯【星品礼盒】白-5000mAh</div>
                <div>会员价：￥{{ model.salePrice }}</div>
                <div v-for="(item, index) in specs" :key="index">
                    {{ item.specName }}：
                    <el-tag v-for="(a, b) in item.items" :key="b" :class="{activ:specRowIndex == index && activIndex == b}" @click="eventChangeBackground(index,b)" >{{ a.specValues }}</el-tag>
                </div>
                <div>
                    <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1"
                        :max="10"></el-input-number> <el-button type="danger" @click="AddCar">加入购物车</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>


<script>
export default {
    data() {
        return {
            activIndex:0,
            specRowIndex:0,
            num: 1,
            model: {},
            specs: []
        };
    },
    created() {
        this.onloadDetailData()
        this.specs.forEach(el=>{
            el.selectIndex = -1
        })
    },
    methods: {
        eventChangeBackground(rowIndex,b){
            this.specRowIndex = rowIndex
            this.activIndex = b
            // var json = this.specs[rowIndex]
            // json.selectIndex = index
            // this.$set(this.specs,rowIndex,json)
            // console.log(this.specs)
        },
        AddCar() {

            var memberInfo = localStorage.getItem('2011A_member_info')
            if(memberInfo == null){
                this.$router.push('/login')
            }

            let memberId =  JSON.parse(memberInfo).id

            let url = 'http://localhost:5299/car/hash'
            let data = {
                "memberId": memberId,
                "productSkuId": this.model.id,
                "productNumber": this.num,
                "productPrice": this.model.salePrice,
                "productName": "",
                "storeName": "",
                "brandName": "",
                "productImage": "",
                "productSpec": ""
            }
            this.$http.post(url, data).then(res => {
               console.log(res)
                if(res.data.code == 200){
                    this.$message.info(res.data.message)
                }
            })

        },
        //添加购物车按钮事件
        AddCar2() {
            //用户ID
            //想购物的商品：商品ID、购买的数量、此次该商品的售价（价格）
            //其它的：名称、图片、店铺


            //由于还没做登录，所以用户ID用模拟数据
            let memberId = '123467890'  //会员id
            /***
             * 要判断会员（用户）是否登录？
             * 先去本地缓存中获取用户信息
             * 如果没有，则去登录，在登录成功的时候，需要将用户信息进行缓存
             * 如果有，则正常操作
             * 
             */
            //从本地缓存中取
            var u = localStorage.getItem("2011A_member_info")
            if (u != null) {
                memberId = JSON.parse(u).id
            } else {
                this.$router.push('/login')
            }


            if (memberId == '') {
                //表示用户未登录，跳转到登录
            }

            let skuId = this.$route.query.id  //skuid
            let number = this.num  //购买的数量
            let price = this.model.salePrice //商品的价格

            let url = this.$baseUrl + '/car/hash'
            let data = {
                "memberId": memberId,
                "productSkuId": skuId,
                "productNumber": number,
                "productPrice": price,
                "productName": "",
                "storeName": "",
                "brandName": "",
                "productImage": "",
                "productSpec": ""
            }
            this.$http.post(url, data).then(res => {
                if (res.data.code == 200) {
                    this.$message.info(res.data.message)
                }
                else {
                    this.$message.error(res.data.message)
                }
            })


        },
        handleChange(value) {
            console.log(value);
        },
        onloadDetailData() {
            let url = this.$baseUrl + '/product/sku/detail'
            this.$http.get(url, {
                params: {
                    skuId: this.$route.query.id
                }
            }).then(res => {
                console.log(res)
                this.specs = res.data.data.specs
                this.model = res.data.data.model
            })
        }
    }
};
</script>

<style scoped>
.activ{
    border:1px solid red;
    background: red;
    color: #fff;
}
</style>